<template>
  <n-carousel
      autoplay
      draggable
      :space-between="20"
      class="carousel"
      :style="{height: props.height + 'px'}"
  >
    <img v-for="(img, index) in props.images"
         :key="index"
         :src="img as string"
         class="carousel-img"
         :style="{height: props.height + 'px'}"/>
  </n-carousel>
</template>

<script setup lang="ts">

//props
const props = defineProps({
  height: {
    type: Number,
    default: 240
  },
  images: {
    type: Array,
    default: () => [
        'src/assets/banner/img_0.png',
        'src/assets/banner/img_1.png',
        'src/assets/banner/img_2.png',
        'src/assets/banner/img_3.png'
    ]
  }
});

</script>

<style scoped>
.carousel {
  width: 100%;
}
.carousel-img {
  width: 100%;
  object-fit: cover;
}
</style>